<template>
  <div class="snow-page">
    <div id="mapContainer" style="width: 100%; height: 100%"></div>
  
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from "vue";


const map = ref({}) as any;

onMounted(() => {
  initMap();
});

function initMap() {
  //map创建地图实例

  map.value = new T.Map(document.getElementById("mapContainer"));

  // 设置地图中心点和缩放级别
  map.value.centerAndZoom(new T.LngLat(121.42638, 31.63153), 11);
  //创建对象
  let ctrl = new T.Control.MapType();
  //添加控件
  map.value.addControl(ctrl);


  // map.value.on("click", function (e) {
  //   map.value.clearOverLays();
  //   console.log(e);
  //   form.lon = e.lnglat.lng;
  //   form.lat = e.lnglat.lat;

  //   getAddressInfo();
  //   const position = new T.LngLat(e.lnglat.lng, e.lnglat.lat);
  //   let icon = new T.Icon({
  //     iconUrl: "./icon.png", // 请求图标图片的URL
  //     iconSize: new T.Point(40, 40), // 图标可视区域的大小
  //     iconAnchor: new T.Point(30, 30) // 图标的定位锚点
  //   });
  //   const marker = new T.Marker(position, {icon: icon});
  //   map.value.addOverLay(marker);
  // });
}

</script>

<style lang="scss" scoped>
.search-container {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  display: flex;
}

.search-input {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  width: 200px;
}

.search-button {
  padding: 8px 16px;
  font-size: 14px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}
</style>
